<template>
  <div class="login">
      <div>
          <img src="@/assets/bg.png" width="100%" alt="">
      </div>
      <div>
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="用户名"
              label="账号"
              placeholder="请输入账号"
              :rules="[{ required: true, message: '请填写账号' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
              <van-button round block type="primary" native-type="submit">提交</van-button>
            </div>
          </van-form>
      </div>
  </div>
</template>

<script>
import { Dialog,Toast } from 'vant';
export default {
    name:'login',
    data(){
        return{
            username: '',
            password: '',
        }
    },
    methods: {
      async onSubmit() {
        if(this.username.length<=4){
            var reg=/[\u4E00-\u9FA5]/;
            if(reg.test(this.username)){
                Dialog.alert({
                  theme:'round',
                  title: '提示',
                  message: '账号格式有误~',
                  width:'70%',
                  height:'30%'
                }).then(() => {});
                return;
            }
            // else{
            //     Dialog.alert({
            //       theme:'round',
            //       title: '提示',
            //       message: '账号长度为4~12位~',
            //       width:'70%',
            //       height:'30%'
            //     }).then(() => {});
            //     return;
            // }
        }
       
        var {data:res}=await this.$axios.post(this.$location.doLogin,this.$qs.stringify({
            loginName:this.username,
            loginPassword: this.password
        })
        )
        console.log(res.data)
        if(res.status==200){
            sessionStorage.setItem('set_token',res.data);
            this.$router.push('/home');
            Toast.loading({
                message:'登录成功',
                position:'top'
            });
        }else{
            Toast.loading({
                message:'登录失败',
                position:'top'
            });
        }
      },
    },
}
</script>

<style>

</style>